<template>
  <div class="app-container">
    <div class="filter-container" style="color:#909399;font-size:14px;">{{posmerchantInfo.name}}</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
      <el-form-item label="商户编号" prop="merchantNo" ref="merchantNo">
        <el-input v-model="ruleForm.merchantNo"></el-input>
      </el-form-item>
      <el-form-item label="密钥" prop="jdKey" ref="jdKey">
        <el-input v-model="ruleForm.jdKey"></el-input>
      </el-form-item>
      <el-form-item label="费率" prop="scanRate" ref="scanRate">
        <el-input v-model="ruleForm.scanRate">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="close();">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getMerchantpaychannel, getPosmerchant, addRevDelmerchantpaychannel } from '@/api/api.verify.js'

export default {
  name: 'CmfForm',
  data() {
    return {
      posmerchantInfo:{},//门店信息 
      ruleForm: {
        merchantNo:null,//商户编号
        jdKey:null,//密钥
        scanRate:null,//费率

        channelId:581,//系统通道id
        channelName:"聪明付",//通道名称
        checkStatus:20,//审核状态
        channelType:220,//通道类型
        merchantId:null,//商户id
        whetherHigQulitMerch:20,//表单
      },
      rules: {
        merchantNo:[
            {required: true, message: '请输入商户编号', trigger: 'blur'},
        ],
        jdKey:[
            {required: true, message: '请输入密钥', trigger: 'blur'},
        ],
        scanRate:[
            {required: true, message: '请输入费率', trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    this.posmerchantInfo=this.$route.query
    this.getStart();
  },
  methods: {
    getStart() {//初始化
        let _this=this;
        let merchantId=this.posmerchantInfo.id
        this.ruleForm.merchantId=merchantId;
        this.getPosmerchant();
    },
    getPosmerchant(){//商户信息查询
        let data={};
        let _this=this;
        if(this.posmerchantInfo.typeId){
            data.typeId=this.posmerchantInfo.typeId
            getMerchantpaychannel(data).then(d=>{
              _this.ruleForm.merchantNo=d.data.merchantNo;//商户编码
              _this.ruleForm.shopNum=d.data.shopNum;//商户APPID
              _this.ruleForm.jdKey=d.data.jdKey;//商户公钥
              _this.ruleForm.md5Key=d.data.md5Key;//上传证书JKS
              _this.ruleForm.scanRate=d.data.scanRate;//费率
            })
        }else{
            data.id=this.posmerchantInfo.id
            getPosmerchant(data,'GET').then(d=>{
              _this.merchantInfo=d.data;
              _this.ruleForm.scanRate=d.data.transRuleType;
            });
        };
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid,object) => {
        if(valid) {
          _this.getForm()
        }else{
          for (const i in object) {
            let dom = this.$refs[i]
            // 这里是针对遍历的情况（多个输入框），取值为数组
            if (Object.prototype.toString.call(dom) !== '[object Object]') { 
              dom = dom[0]
            }
              // 第一种方法（包含动画效果）
              dom.$el.scrollIntoView({ // 滚动到指定节点
              // 值有start,center,end，nearest，当前显示在视图区域中间
              block: 'center', 
              // 值有auto、instant,smooth，缓动动画（当前是慢速的）
              behavior: 'smooth' 
            });
            break // 跳出循环了
          }
        }
      });
    },
    getForm() {//提交表单
      let _this=this;
      let data=this.ruleForm;
      let method="POST";
      let msg="添加成功";
      if(this.posmerchantInfo.typeId){
        method="PUT";
        msg="修改成功";
        data.id=this.posmerchantInfo.typeId
      }
      addRevDelmerchantpaychannel(data,method).then(d=>{
        this.$message({
          message: msg,
          type: 'success'
        });
        setTimeout(function(){
          _this.$router.go(-1)
        },2000)
      })
    },
  }
}
</script>

